<template>
  <div class="tuli">
      <div class="tuli-inner" v-for="(item,index) in dataList" :key="index">
         <img :src="'/data/images/icon/'+ item.label+'.png'" alt="">
          <span>
               {{item.label}}
          </span>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            dataList:[]
        }
    },
    props:["tuliList"],
    watch:{
        tuliList(newval,oldval){
            this.dataList = newval
        }
    },
    mounted(){
        console.log(123)
    }
}
</script>

<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .tuli{
        position:fixed;
        width:vw(145);
        // height:vh(100);
        // background:pink;
        bottom:vh(53);
        left:vw(420);
        background: rgba(3,32,64,0.2);
        box-shadow: 0px 0px 5px #01c7ff inset;
        justify-content: space-between;
        padding:vh(8) vw(0) vh(8) vw(15);
        box-sizing:border-box;
        .tuli-inner{
            width:100%;
            height:vh(40);
            line-height:vh(30);
            img{
                width:20px;
                height:18px;
                vertical-align:middle;
                margin-right:vw(20);
                object-fit:fill;
            }
            span{
                font-size:vw(13)
            }
        }
    }  
}
</style>